<template>
	<div class="selected">
		<div class="carousel" v-if="list.data">
			<swiper :options="swiperOption"  ref="mySwiper"  v-if="list.data" class='haha'>  
	            <!-- 这部分放你要渲染的那些内容 -->  
	            <swiper-slide v-for="(u,k) in list.data[0].recommends" track-by="k">  
	            	<img v-bind:src="u.thumb"/>
	            </swiper-slide>  
	            <!-- 这是轮播的小圆点 -->  
	            <div class="swiper-pagination" slot="pagination"></div>  
	        </swiper>  
		</div>
		
		
		<div class="liebiao" v-for="(i,index) in list.data" v-if="index>1 && index<22">
		<div class="grey_bars"></div>	
		<div class="sort_module" v-if="list.data" >		
			<div class="title">{{i.name}}
				<div class="most">更多></div>
			</div>
			<div class="details">
				<div class="individual" v-for="(item,index) in i.recommends" @click="changexq(item)" >
					<div class="img">	
						<img v-bind:src="item.thumb"/>
					</div>
					<div class="text">
						{{item.title}}
					</div>
				</div>				
			</div>
		</div>
		</div>
	
	</div>
	
</template>

<script>
	import {swiper, swiperSlide } from 'vue-awesome-swiper' ;
	export default {
		components: {  
            swiper,  
            swiperSlide  
        }, 
		data(){
			return {
				list:[],
				xiangxi:[],
				recommends: [],
				 swiperOption: {  
                	pagination: '.swiper-pagination',  
                	autoplay: 1000,
                	loop: true
				}  
			}
			
		},
		 computed: {  
            swiper() {  
              return this.$refs.mySwiper.swiper;  
            }  
        },  
		methods:{
			request(){
				this.$http({
					url:'http://localhost:8080/request',
					method:'GET',
					
				}).then(function(req){
					var result = JSON.parse(req.body);
						this.list = result;
				})
			},
			changexq(item,m4a){
				this.$store.commit('changeXq',item);
			
			}
		},
		mounted(){
			this.request();
		}
	}

</script>

<style scoped="scoped">
		.carousel{
			width: 100%;
			height: 4.804347rem;
			/*background: url(../../img/lunbo2.png) no-repeat;*/
			/*background-size: 100%;*/
			/*background-color: yellow;*/
		}
		.carousel img{
			width: 100%;
			height: 100%;
		}
		.haha{
			height: 100%;
		}
		.selected{
			width: 100%;
			height: 100%;
		}
		.grey_bars{
			width: 100%;
			height: 0.152173rem;
			background-color: #f4f4f4;
		}
		.sort_module{
			/*width: 100%;*/
			height: 4.23913rem;
			padding:0.217391rem 0.369565rem 0.434782rem  0.369565rem ;
			/*background-color: yellow;*/
		}
		.liebiao{
			width: 100%;
			height: 4.9rem;
		}
		.title{
			width: 100%;
			height: 0.434782rem;
			line-height: 0.434782rem;
			font-size: 0.434782rem;
			margin-left: 0.108695rem;
			position: relative;
		}
		.most{
			position: absolute;
			right: -0.021739rem;
			top: 0;
			font-size: 0.347826rem;
			color: #b23539;
		}
		.details{
			width: 100%;
			height: 3.521739rem;
			/*background-color: green;*/
			margin-top: 0.304347rem;
			display: flex;
			justify-content: space-between;
		}
		.individual{
			width: 2.673913rem;
			height: 100%;
			/*background-color: green;*/
		}
		.img{
			width: 2.673913rem;
			height: 2.673913rem;
		}
		.img img{
			width: 100%;
			height: 100%;
		}
		.text{
			width: 100%;
			height: 0.869565rem;
			line-height: 0.434782rem;
			font-size: 0.304347rem;
			overflow : hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
		}
</style>